<template>
  <!-- MemberAdd 添加会员 -->

  <page-meta :page-style="'overflow:' + (visible ? 'hidden' : 'visible')">
    <PageContainer>
      <view class="container">
        <Tabs v-model="currentTab">
          <Header
            title="添加会员"
            :is-box-shadow="false"
            :z-index="99"
            :default-slot-content-height="78"
          >
            <TabNav tabBarColor="#D7B87C" />
          </Header>
          <template v-for="item in templateList" :key="item.id">
            <TabsItem :name="item.name" :value="item.id">
              <view class="content">
                <view class="title">会员资料</view>
                <BasicsForm
                  :validate-trigger="'bind'"
                  :schemas="schemas[item.id]"
                  :btn-group-options="{
                    submit: {
                      text: '添加',
                    },
                  }"
                  @submit="onSubmitUnit"
                >
                  <template #dynamicSlot="{ model, field }">
                    <OfficialAccount padding="0" />
                  </template>
                </BasicsForm>
              </view>
            </TabsItem>

            <!-- <TabsItem name="个人会员" :value="item.id">
            <view class="content">
              <view class="title">会员资料</view>
              <BasicsForm
                :validate-trigger="'bind'"
                :schemas="[
                  {
                    field: 'leadingName',
                    label: '负责人姓名',
                    required: true,
                    component: 'Input',
                  },
                  {
                    field: 'leadingPhone',
                    label: '手机号码',
                    required: true,
                    component: 'InputPhone',
                  },
                  {
                    field: 'levelId',
                    label: '会员职务',
                    component: 'Select',
                    required: true,
                    componentProps: {
                      localdata: levelData,
                    },
                  },
                  {
                    field: 'joinTime',
                    label: '入会时间',
                    component: 'DatePicker',
                    defaultValue: Date.now(),
                    required: true,
                  },
                  {
                    field: 'memberEndTime',
                    label: '到期时间',
                    component: 'DatePicker',
                    required: true,
                  },
                ]"
                :show-placeholder-view="false"
                @submit="onSubmitPerson"
              />
            </view>
          </TabsItem> -->
          </template>
        </Tabs>

        <!-- <view :style="{ marginTop: '30rpx', paddingBottom: '200rpx' }">
        <OfficialAccount />
      </view> -->

        <ShowModal
          v-model="visible"
          content="添加会员成功"
          cancelText="返回"
          confirmText="收集资料"
          openType="share"
          @close="handleClose"
        ></ShowModal>
        <!-- <button @click="">提交</button> -->
      </view>
    </PageContainer>
  </page-meta>
</template>

<script lang="ts" setup>
  /**  MemberAdd  添加会员 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import Tabs from '@/components/tabs/index.vue';
  import TabsItem from '@/components/tabs/item.vue';
  import TabNav from '@/components/tabs/nav.vue';
  import BasicsForm from '@/components/Form/BasicsForm.vue';
  import OfficialAccount from '@/components/OfficialAccount/index.vue';
  import ShowModal from '@/components/ShowModal/index.vue';
  import { ref } from 'vue';
  import { addMember, applyTemplateList } from '@/api/admin';
  import { type IAddMemberData, type IApplyTemplateListResData } from '@/api/admin/types';
  import { memberTypeGetList } from '@/api/membership';
  import { localDataMapping } from '@/components/Form/hooks/useForm';
  import { onLoad, redirectTo } from '@/router';
  import { onShareAppMessage } from '@dcloudio/uni-app';
  import { useAppStoreWithOut } from '@/store/modules/app';
  import { ShareTypeEnum } from '@/enums/shareEnum';
  import { type FormSchema } from '@/components/Form';
  import type { Localdata } from '@/components/Form/types';
  import { useAppShare } from '@/hooks/core/useAppShare';

  const { setWxSharePath } = useAppShare();

  const currentTab = ref(1);
  const visible = ref(false);
  const memberId = ref();
  const levelData = ref<Localdata[]>([]);
  const templateList = ref<IApplyTemplateListResData[]>();
  const schemasTemp: FormSchema[] = [
    {
      field: 'leadingName',
      label: '负责人姓名',
      required: true,
      component: 'Input',
    },
    {
      field: 'leadingPhone',
      label: '手机号码',
      required: true,
      component: 'InputPhone',
    },
    {
      field: 'levelId',
      label: '会员职务',
      component: 'Select',
      required: true,
      componentProps: {
        localdata: levelData,
      },
    },
    {
      field: 'joinTime',
      label: '入会时间',
      component: 'DatePicker',
      defaultValue: Date.now(),
      required: true,
    },
    {
      field: 'memberEndTime',
      label: '到期时间',
      component: 'DatePicker',
      required: true,
    },
    {
      field: 'OfficialAccount',
      component: 'Input',
      slot: 'OfficialAccount',
      itemProps: {
        labelPosition: 'left',
        labelWidth: '0rpx',
      },
    },
  ];

  const schemas: any = ref({
    1: [
      {
        field: 'memberName',
        label: '单位名称',
        required: true,
        component: 'Input',
      },
      ...schemasTemp,
    ],
    2: [...schemasTemp],
  });

  const getApplyTemplateList = async () => {
    try {
      let res = await applyTemplateList();
      templateList.value = res || [];
      currentTab.value = templateList.value[0]?.id || 1;
    } catch (error) {}
  };

  const getLevelData = async () => {
    const typeDataName = [{ field: 'levelId', type: 'memberLevel' }];
    const typeRes = await memberTypeGetList(typeDataName.map((v) => v.type));
    levelData.value = localDataMapping(typeRes['memberLevel'], { label: 'name', value: 'id' });
  };

  const onSubmitUnit = (data: IAddMemberData) => {
    submit(data);
  };

  const onSubmitPerson = (data: IAddMemberData) => {
    submit(data);
  };

  function submit(data: IAddMemberData) {
    addMember({ ...data, applyType: currentTab.value })
      .then((res) => success(res))
      .catch((err) => console.error(err));
  }

  const success = (res: any) => {
    console.log('res--->', res);
    memberId.value = res.id;
    visible.value = true;
  };

  const handleClose = () => {
    setTimeout(() => {
      redirectTo({ name: 'memberManage' });
    }, 200);
  };

  const { hasShareImgConfig } = useAppStoreWithOut();

  onShareAppMessage(() => {
    const membershipShare = hasShareImgConfig(ShareTypeEnum.membership);
    return {
      path: setWxSharePath({ name: 'updateMembershipInfo' }),
      imageUrl: membershipShare?.iconUrl,
      title: membershipShare?.desc,
    };
  });

  onLoad(() => {
    getLevelData();
    getApplyTemplateList();
  });
</script>

<style lang="scss" scoped>
  .content {
    margin-bottom: 30rpx;
  }

  .title {
    position: relative;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    background-color: #fff;
    padding-left: 30rpx;
    z-index: 1;
  }

  .title::after {
    position: absolute;
    content: '';
    width: 112rpx;
    height: 14rpx;
    background: #ffe7b4;
    top: 57rpx;
    left: 30rpx;
    z-index: -1;
  }
</style>
